<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="">
			省份：<select name="" id="provinceId" onchange="provinceIdChange()">
				<option value="-1">请选择省份</option>
			</select>
			市区：<select name="" id="cityId" onchange="cityIdChange()">
				<option value="-1">请选择市区</option>
			</select>
		</div>
		<div id="">
			你选择的地址是：<label id="sitShow"></label>
		</div>
	</body>
	<script type="text/javascript">
		var provinceName=['北京市','上海市','福建省','广东省'];
		provinceName.push('江西省');
		var cityName=[
			['朝阳区','海淀区'],
			['浦西区','浦东区'],
			['福州市','龙岩市'],
			['深圳市','东莞市'],
			['南昌市','抚州市']
		];
		function provinceIdChange(){
			var provinceObject = document.getElementById('provinceId');
			var cityObject = document.getElementById('cityId');
			if(provinceObject.value==-1){
				return;
			}
			cityObject.innerHTML=`<option value="-1">请选择市区</option>`;
			var city=cityName[provinceObject.value];
			for(var i=0;i<city.length;i++){
				cityObject.innerHTML+=`<option value="`+i+`">`+city[i]+`</option>`;
			}
		}
		function cityIdChange(){
			var provinceObject = document.getElementById('provinceId');
			var cityObject = document.getElementById('cityId');
			if(cityObject.value==-1){
				return;
			}
			var provinceChooseName=provinceName[provinceObject.value];
			var cityChooseName =cityName[provinceObject.value][cityObject.value];
			sitShow.innerText=provinceChooseName+'--'+cityChooseName;
			
		}
		onload = function(){
			var provinceObject = document.getElementById('provinceId');
			// console.log(provinceObject);
			for(var i=0;i<provinceName.length;i++){
				provinceObject.innerHTML+=`<option value="`+i+`">`+provinceName[i]+`</option>`;
			}
		}
	</script>
</html>
